<html>
<head>
    <meta charset="UTF-8">
    <title>UMock</title>
</head>
<style>
    table {
        display: table;
        border-collapse: separate;
        border-spacing: 2px;
        border-color: grey;
    }
    table.umock_table, table.tecspec {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 4px;
        margin-top: 4px;
    }
    table.umock_table th {
        color: #fff;
        background-color: #555;
        border: 1px solid #555;
        font-size: 12px;
        padding: 3px;
        vertical-align: top;
        text-align: left;
    }
    table.umock_table td {
        line-height: 2em;
        min-width: 24px;
        border: 1px solid #d4d4d4;
        padding: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        vertical-align: top;
    }

    .c_red{color: red}
    .c_blue{color: blue}


    a.playbtn:active, a.playbtn:hover {
        background-color: #fff;
        color: #ffad33;
    }
    a.playbtn, a.playbtn:link, a.playbtn:visited {
        display: inline-block;
        color: #fff;
        background-color: red;
        border: 1px solid #ffad33;
        font-weight: 700;
        font-size: 11px;
        text-align: center;
        padding: 10px;
        padding-top: 1px;
        padding-bottom: 2px;
        text-decoration: none;
        margin-left: 1px;
        border-radius: 5px;
        white-space: nowrap;
    }

</style>
<body>
<div style="text-align: center"><h3>UMock Method</h3></div>
<table class="umock_table">
    <tr>
        <th>Class</th>
        <th></th>
        <th>UMock Method</th>
    </tr>

    <#list data?keys as item>
       <tr>
           <td width="36%" >
                   ${item}
           </td>
           <td width="4%" >
               <a  class="playbtn" style="background-color: red" href="/umockSwitchOperateByClazz?clazzName=${item}&mark=1">
                   全部开启
               </a>
               <a  class="playbtn" style="background-color:blue" href="/umockSwitchOperateByClazz?clazzName=${item}&mark=0">
                   全部关闭
               </a>
           </td>
           <td width="60%">
                 <table style="width: 100%">
                     <#list data[item] as cfg>
                     <tr>
                          <td width="90%">
                             【<#if cfg.mockSwitch><span class="c_red">开启</span><#else><span><span class="c_blue">关闭</span></#if>】
                             ${cfg.methodMockName}(${cfg.methodName})
                          </td>
                         <td width="10%" style="text-align: center">
                             <a  class="playbtn" href="/umockSwitchOperate?key=${cfg.key}&mark=<#if !cfg.mockSwitch>1<#else>0</#if>" style="<#if cfg.mockSwitch> background-color: red;<#else>background-color:blue;</#if>">
                                 <#if !cfg.mockSwitch><span class="red">开启</span> <#else> <span>关闭</span></#if>
                             </a>
                         </td>
                     </tr>
                    </#list>
                 </table>
           </td>
       </tr>
    </#list>
</table>
</body>
</html>